<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" append-to-body>
        
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-download" :loading="download" :disabled="download" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :summary-method="getSummaries" show-summary  :data="tableData" border script>
            <el-table-column label="日期" prop="midnightYesterday" min-width="100"></el-table-column>
            <el-table-column label="销售额$" prop="total_price" min-width="100" sortable  ></el-table-column>
            <el-table-column label="广告费$" prop="advertising" min-width="100"></el-table-column>
            <el-table-column label="单量" prop="quantity" min-width="80"></el-table-column>
            <el-table-column label="SKU件数" prop="skuquantity" min-width="100" sortable  ></el-table-column>
            <el-table-column label="客单价$" prop="customer_price" min-width="100" sortable  ></el-table-column>
            <el-table-column label="客单件" prop="customer_sku" min-width="100" sortable  ></el-table-column>
            <el-table-column label="ROI" prop="roi" min-width="100" sortable  ></el-table-column>
            <el-table-column label="预估盈利$" prop="profit" min-width="120" sortable   ></el-table-column>
            <el-table-column label="打包费$" prop="LogisticsMarkupFee" min-width="100" sortable  ></el-table-column>
            <el-table-column label="预估物流$" prop="estimate_freight" min-width="120" sortable  ></el-table-column>
            <el-table-column label="采购成本$" prop="material" min-width="120" sortable  ></el-table-column>
            <el-table-column label="保险费$" prop="premium_price" min-width="100" sortable  ></el-table-column>
            <el-table-column label="平台佣金$" prop="PlatformCommission" min-width="120" sortable  ></el-table-column>
            <el-table-column label="预估退款$" prop="refund" min-width="120" sortable  ></el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
import { queryOrderReportDay,exportReportDay } from '@/api/report'
import { exportFile } from '@/utils/index'
export default {
    name: 'DayDetailDialog',
    components: {},
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            download: false,
            tableData: [],
            queryParams: {
                shop_id: '',
                midnightYesterday: 0,
                endOfYesterday: 0,
            }
        }
    },
    computed: {
        title() {
            return `每日业绩明细`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val) {
                    this.queryParams = Object.assign({}, this.queryParams, val)
                }
            },
            immediate: true,
            deep: true,
        },
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        //表尾合计行
        getSummaries(param) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '统计'
                    return
                }
                const values = data.map(item => Number(item[column.property]))
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr)
                        if (!isNaN(value)) {
                            return prev + curr
                        } else {
                            return prev
                        }
                    }, 0)
                    if (index === 7) {
                        sums[index] = ''
                    }else if(index === 5){
                        sums[index] = ''
                    }else if(index === 6){
                        sums[index] = ''
                    }else {
                        sums[index] = sums[index].toFixed(2)
                    }
                } else {
                    sums[index] = ''
                }
            })
            return sums
        },
        handleExport() {
            this.download = true
            const qyparams = { ...this.queryParams }
            exportReportDay(qyparams)
                .then(res => {
                    console.log(res)
                    exportFile(res, () => {
                        this.download = false
                    })
                })
                .catch(err => {
                    console.log(err)
                    this.download = false
                })
        },
        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm')
            this.getDetail()
        },
        getDetail() {
            this.loading = true
            const qyparams = { ...this.queryParams }
            queryOrderReportDay(qyparams)
                .then(res => {
                    this.tableData = res.data ?? []
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style></style>
